<template>
    <span>
        <Button type="primary" size="small" @click="handleAlarmPlanEditShow(data)">编辑</Button>
        <Modal v-model="alarm_plan_edit_modal" title="编辑告警计划" :mask-closable="false" width="75">
            <Form :model="alarm_plan_current" :label-width="100">
                <FormItem label="设备ID">
                    <Tag>
                        <div v-if="clientsBriefData[alarm_plan_current.client_id]">
                            <div>{{ clientsBriefData[alarm_plan_current.client_id] }}<span style="font-size: 10px;color:#aaa;margin-left: 5px;">{{ alarm_plan_current.client_id }}</span></div>
                        </div>
                        <div v-else>{{ alarm_plan_current.client_id }}</div>
                    </Tag>
                </FormItem>
                <FormItem label="计划名称">
                    <Input v-model="alarm_plan_current.plan_name"></Input>
                </FormItem>
                <FormItem label="最大允许断网时间(秒)">
                    <Input v-model="alarm_plan_current.plan_maxtime"></Input>
                    <p style="color:#aaa;">单位为秒，如果为 0 则表示不进行断网时间告警</p>
                </FormItem>
                <FormItem label="最大断网次数">
                    <Input v-model="alarm_plan_current.plan_maxcount"></Input>
                    <p style="color:#aaa;">如果为 0 则表示不进行断网次数告警</p>
                </FormItem>
                <FormItem label="断网次数的时间范围(秒)">
                    <Input v-model="alarm_plan_current.plan_rangetime"></Input>
                    <p style="color:#aaa;">单位为秒，不低于 30。在此限定时间范围内容达到最大断网次数则告警</p>
                </FormItem>
                <FormItem label="生效时段">
                    <time-picker confirm type="timerange" format="HH:mm" v-model="alarm_plan_current.plan_time" style="width: 200px"></time-picker>
                    <p style="color:#aaa;">默认为全天</p>
                </FormItem>
                <FormItem label="告警消息模板">
                    <Input v-model="alarm_plan_current.plan_template" type="textarea" :autosize="{minRows: 1,maxRows: 5}"></Input>
                    <p style="color:#aaa;">
                        <AlarmTemplateTestButton :alarm_plan="alarm_plan_current"></AlarmTemplateTestButton>
                        <AlarmTemplateHelpButton style="float:right;"></AlarmTemplateHelpButton>
                    </p>
                </FormItem>
            </Form>
            <template #footer>
            <Button type="primary" @click="handleAlarmPlanEditOk">确定</Button>
            <Button type="text" @click="alarm_plan_edit_modal = false">取消</Button>
            </template>
        </Modal>
    </span>
</template>

<script>
import { mapGetters } from 'vuex';
import AlarmTemplateHelpButton from './AlarmTemplateHelpButton.vue';
import AlarmTemplateTestButton from './AlarmTemplateTestButton.vue';

export default {
    name: 'AlarmPlanEditButton',
    components: {
        AlarmTemplateHelpButton,
        AlarmTemplateTestButton
    },
    props: {
        data: Object
    },
    data() {
        return {
            alarm_plan_current: {
                client_id: '',
                plan_id: 0,
                plan_name: '',
                plan_maxtime: 30,
                plan_maxcount: 0,
                plan_rangetime: 30,
                plan_time: ['', ''],
                plan_begintime: '',
                plan_endtime: '',
                plan_template: '',
                plan_enable: false,
                plan_email: false,
                plan_sms: false,
                alarm_type: 'common'
            },
            alarm_plan_edit_modal: false,
        }
    },
    computed: {
        ...mapGetters(['clientsBriefData', 'getClientBriefValue']),
    },
    methods: {
        handleAlarmPlanEditShow(row) {
            this.alarm_plan_current.client_id = row.client_id;
            this.alarm_plan_current.plan_id = row.plan_id;
            this.alarm_plan_current.plan_name = row.plan_name;
            this.alarm_plan_current.plan_maxtime = row.plan_maxtime;
            this.alarm_plan_current.plan_maxcount = row.plan_maxcount;
            this.alarm_plan_current.plan_rangetime = row.plan_rangetime;
            this.alarm_plan_current.plan_time = [row.plan_begintime, row.plan_endtime];
            this.alarm_plan_current.plan_template = row.plan_template;
            this.alarm_plan_current.plan_email = row.plan_email;
            this.alarm_plan_current.plan_sms = row.plan_sms;
            this.alarm_plan_current.plan_enable = row.plan_enable;
            this.alarm_plan_edit_modal = true;
        },
        handleAlarmPlanEditOk() {
            let plan_maxtime = this.alarm_plan_current.plan_maxtime;
            if (plan_maxtime === '' || isNaN(plan_maxtime) || (plan_maxtime != 0 && plan_maxtime < 30)) {
                this.errorMessage('最大时间必须大于等于30秒');
                return;
            }
            let plan_maxcount = this.alarm_plan_current.plan_maxcount;
            if (plan_maxcount === '' || isNaN(plan_maxcount) || plan_maxcount < 0) {
                this.errorMessage('最大次数必须大于等于0');
                return;
            }
            let plan_rangetime = this.alarm_plan_current.plan_rangetime;
            if (plan_rangetime === '' || isNaN(plan_rangetime) || plan_rangetime < 30) {
                this.errorMessage('时间范围必须大于等于30秒');
                return;
            }
            this.alarm_plan_current.plan_begintime = this.alarm_plan_current.plan_time[0];
            this.alarm_plan_current.plan_endtime = this.alarm_plan_current.plan_time[1];
            this.$http.post('/update_alarm_plan', this.alarm_plan_current).then(res => {
                if (res.status == 'ok') {
                    this.$Message.success('修改成功');
                    this.alarm_plan_edit_modal = false;
                    this.$emit('success');
                }else {
                    this.errorMessage(res.data);
                }
            });
        },
        
    }
}
</script>